<template>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-toolbar clearfix">
                        <div class="toolbar-btn-action">
                            <a class="btn btn-primary m-r-5" href="javascript:void(0)" v-on:click="addAccount()"><i class="mdi mdi-plus"></i>添加公众号</a>
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="table-responsive" style="width: 100%;margin-top: 20px;" v-loading="loading">
                            <el-table
                                    :data="list"
                                    style="width: 100%"
                            >
                                <el-table-column
                                        label="ID"
                                        type="index"
                                        :index="indexMethod"
                                        width="40">
                                </el-table-column>
                                <el-table-column
                                        prop="name"
                                        label="公众号名称"
                                        width="100">
                                    <template slot-scope="scope">
                                        <a @click="openEdit(scope.row)" style="cursor:pointer;">{{ scope.row.name }}</a>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="status"
                                        label="状态"
                                        :formatter="formatStatus"
                                        width="80">
                                </el-table-column>
                                <el-table-column
                                        prop="invalidStatus"
                                        label="失效状态"
                                        :formatter="formatInvalid"
                                        width="80">
                                </el-table-column>
                                <el-table-column
                                        label="操作"
                                        align="center"
                                        width="220"
                                >
                                    <template slot-scope="scope">
                                        <el-button size="mini" @click="openEdit(scope.row)">修改</el-button>
                                        <el-button size="mini" type="success" @click="handleStatus(scope.row._id,0)" v-if="scope.row.status===1">禁用</el-button>
                                        <el-button size="mini" @click="handleStatus(scope.row._id,1)" v-if="scope.row.status===0">开启</el-button>
                                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                                    </template>

                                </el-table-column>
                            </el-table>

                            <nav style="margin-top: 20px">
                                <el-pagination
                                        layout="total, sizes, prev, pager, next"
                                        :total="total"
                                        :hide-on-single-page="pageActive"
                                        @size-change="handleSizeChange"
                                        :page-size="pageSize"
                                        :current-page="currentPage"
                                        :page-sizes="[10, 20, 30, 40]"
                                        @current-change="handleCurrentChange"
                                >
                                </el-pagination>
                            </nav>

                            <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
                                <el-form :model="form">
                                    <el-form-item label="公众号名称" :label-width="formLabelWidth">
                                        <input class="form-control" type="text"
                                               placeholder="任务标题" v-model="form.name" style="width:80%;" v-if="!id">
                                        <span v-if="id">{{form.name}}</span>
                                    </el-form-item>

                                    <el-form-item label="公众号称Token" :label-width="formLabelWidth">
                                        <el-input
                                                type="text"
                                                placeholder="请输入Token"
                                                v-model="form.token" style="width:80%;">
                                        </el-input>
                                    </el-form-item>

                                    <el-form-item label="登录cookie" :label-width="formLabelWidth">
                                        <el-input
                                                type="textarea"
                                                placeholder="请输入登录cookie"
                                                v-model="form.cookie" style="width:80%;"
                                                :rows="8"
                                        >
                                        </el-input>
                                    </el-form-item>
                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="submitSet">确 定</el-button>
                                </div>
                            </el-dialog>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "WechatAccountComponent",
        data(){
            return {
                pageActive: false,
                list: [],
                pageSize: 10,
                total: 0,
                currentPage: 1,
                loading: true,
                order: 'desc',
                orderField: '_id',
                dialogFormVisible:false,
                formLabelWidth:'120px',
                form:{
                    name:'',
                    token:'',
                    cookie:''
                },
                id:'',
                dialogTitle:''
            }
        },
        methods:{
            search: function () {
                let self = this;
                let uri = 'wechat-account/post-list';
                self.loading = true;
                let postData = {
                    keyword: self.keyword,
                    page: self.currentPage,
                    limit: self.pageSize,
                    order: self.order,
                    orderField: self.orderField
                };

                axios.post(uri,postData).then(function (result) {
                    self.total = result.wechatAccounts.total;
                    if (self.total > 0) {
                        self.pageActive = false;
                    } else {
                        self.pageActive = true;
                    }
                    self.list = result.wechatAccounts.data;
                    self.loading = false;
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            handleSizeChange: function (pageSize) {
                this.pageSize = pageSize;
                this.search();
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.search();
            },
            formatStatus: function (row) {
                return !row.status ? '禁用' : '开启';
            },
            formatInvalid:function(row){
                return !row.invalidStatus ? '正常' : '失效';
            },
            indexMethod: function (index) {
                return index + 1;
            },
            openEdit:function (row) {
                let self = this;
                self.form.token = row.token;
                self.form.cookie = row.cookie;
                self.form.name = row.name;
                self.id = row._id;
                self.dialogTitle = "账号设置";
                self.dialogFormVisible = true;
                console.log(self.form);
            },
            addAccount:function () {
                let self = this;
                self.form.token = '';
                self.form.cookie = '';
                self.form.name = '';
                self.id = '';
                self.dialogTitle = "新增账号";
                self.dialogFormVisible = true;
            },
            submitSet:function () {
                !this.id ? this.store() : this.update();
            },
            store:function () { //保存数据
                let self = this;
                let uri = "wechat-account/store";
                self.dialogFormVisible = false;

                axios.post(uri,self.form).then(function (result) {
                    self.search();
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            update: function () {
                let self = this;
                let uri = "wechat-account/" + self.id;
                self.dialogFormVisible = false;
                axios.put(uri, self.form).then(function (result) {
                    self.search();
                }).then(function (error) {
                    self.loading = false;
                });
            },
            handleStatus(id,status){
                let self = this;
                let uri = "wechat-account/set-status/"+id+"/"+status;

                axios.get(uri,function (result) {
                    self.search();
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            handleDelete: function (row) {
                let self = this;
                let tipStr = "此操作将永久删除“" + row.name + "”, 是否继续?";
                self.$confirm(tipStr, '公众号删除', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.deleteRequire(row._id)
                }).catch(() => {
                    self.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            deleteRequire: function (id) {
                let self = this;
                let uri = "wechat-account/" + id;
                self.loading = true;

                axios.delete(uri).then(function (result) {
                    self.search();
                }).catch(function (error) {
                    self.loading = false;
                });
            },
        },
        mounted() {
            this.search();
        }
    }
</script>

<style scoped>

</style>
